<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Welcome to SuperBook</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-ui.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/jquery-ui.css">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/default.css">
 <script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

 <script>
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>

<script type="text/javascript">
 
 jQuery(document).ready(function($){
 
 $(".countryDropDown").change(function()
 {
 var country=$(this).val();
 
 function fillStateDropDown(countryStateOption)
 {
 $.each(countryStateOption, function(val, text) {
 $('.stateDropDown').append(
 $('<option></option>').val(val).html(text));
 });
 }
 
 function clearStateDropDown()
 {
 $('.stateDropDown option:gt(0)').remove();
 }
 if(country=='INDIA')
 {
 clearStateDropDown();
 
 var indiaStateOption={
 
 RAJASTHAN:'Rajasthan',
 GUJRAT:'Gujrat',
 MAHARASTRA:'Maharastra'
 };
 
 fillStateDropDown(indiaStateOption);
 }
 else if(country=='UK')
 {
 clearStateDropDown();
 var ukStateOption={
 
 LONDON:'London',
 LIVERPOOL:'Liverpool',
 DERBY:'Derby'
 };
 fillStateDropDown(ukStateOption);
 }
 else if(country=='USA')
 {
 clearStateDropDown();
 var usaStateOption={
 
 CALIFORNIA:'California',
 TEXAS:'Texas',
 NEWYORK:'New York'
 };
 fillStateDropDown(usaStateOption);
 }
 
 var stateOptions = {
 val1 : 'text1',
 val2 : 'text2'
 };
 
 });
 
 });
 </script>
 <style type="text/css">
 div
 {
 padding:20px;
 float:left;
 }
 }
 </style>
  
</head>
<body class="body">
<div class="mainDiv">
<h3 class="mainHeader">Welcome to First Time Registration</h3>

<div id="tabs">
 <ul>
	<li><a href="#tabs-1">Personal Information</a></li>
	 <li><a href="#tabs-2">Hotel Information</a></li>
 </ul>
 <div id="tabs-1">
 <form>
First Name&nbsp;		<input id="firstName"  type="text" name="firstName" required/><br>
Last Name		<input id="lastName" type="text" name="lastName" required/><br>
Date Of Birth <input type="text" id="datepicker" /><br>
Email			<input id="emailId" type="text" name="emailId" required /><br>
Phone Number	<input id="phoneNumber" type="text" name="phoneNumber" required/><br>	
</form> 
<button type="submit">Submit</button> 
</div>
	

<div id="tabs-2">
Hotel Name		<input id="hotelName"  type="text" name="hotelName"/><br>
Country:
 <select class="countryDropDown">
 <option value="">--Select Country--</option>
 <option value="INDIA">India</option>
 <option value="UK">UK</option>
 <option value="USA">USA</option>
 </select>
 <br>
 State:
 <select class="stateDropDown">
 <option value="">--Select State--</option>
  </select>
 <br>
 City:
 <select class="cityDropDown">
 <option value="">--Select State--</option>
  </select>
<br>
Locality
 <select class="localityDropDown">
 <option value="">--Select State--</option>
  </select>
<br>

Street/Address	<input id="hotelStreet" type="text" name="hotelStreet" /><br>
</form>
</div>
</body>
</html> 